<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Examples of Adaptive Columns - For more info visit: www.elasticss.com</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="all" href="../production/elastic.css" />
		<script src="../jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="../production/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" media="all" href="images&css/css_for_demo_files.css" />
	</head>
	<body>
		<div class="header-demo">
			<a href="http://elasticss.com"><img src="images&css/demo_header.png" /></a>
		</div>
		<div class="unit">
			<div class="container" style="padding:0;margin:0;border:0;width:80%;margin:0 auto; ">
				<h1>Elastic CSS Framework Adaptive Columns Examples</h1>
				<p>Elastic provides a complete system for complex layouts, explaining every combination in detail takes many lines, and sometimes there are several solutions to accomplish the same results.</p>
				<h1>What are Adaptive Columns?</h1>
				<p>First of all, imagine that you have a blog with a liquid layout and inside of the layout your information is being presented in a three-columns section. Now lets suppose that a user has a very small resolution on its computer and your three-columns are being shrinked to the point that text isn't viewable or readable in an easy way.</p>
				<p>Well, the whole idea of the adaptive columns is to prevent those cases and set a maxium and a minimum width so that your information can still be displayed in a good way.</p>
				<h1>Things you have to notice:</h1>
				<ul>
					<li>The layout of this example is all liquid.</li>
					<li>The adaptive columns is an aproach to have better usability and also better presentation in the way you present your information.</li>
					<li>You need to play with the size of your brower to see what is really going on.</li>
				</ul>
				
			</div>
		</div>
		<div class="unit">
			<div class="container" style="padding:0 30px;margin:0;border:0;margin:0 auto; ">
				<div class="info">
					Regular Three Columns V.S. Adaptive Columns
				</div>
				<div class="columns on-2 same-height">
				  	<div class="column">
				  		<div class="container" style=" ">
					  		<div class="info2">
			    	  			Regular Way to display Information in a Three Columns
			    	  		</div>
					  		<div class="columns on-3">
						  		<div class="container" style=" ">
						  			<div class="column"><div class="container" style="">Column #1</div></div>
						  			<div class="column"><div class="container" style="">Column #2</div></div>
						  			<div class="column"><div class="container" style="">Column #3</div></div>
						  			<div class="column"><div class="container" style="">Column #4</div></div>
						  			<div class="column"><div class="container" style="">Column #5</div></div>
						  			<div class="column"><div class="container" style="">Column #6</div></div>
						  			<div class="column"><div class="container" style="">Column #7</div></div>
						  			<div class="column"><div class="container" style="">Column #8</div></div>
						  			<div class="column"><div class="container" style="">Column #9</div></div>
						  		</div>
						  	</div>	
				  		</div>
				  	</div>
				  	<div class="column">
				  		<div class="container" style=" ">
					  		<div class="info2">
			    	  			Adaptive columns. Minimun width of 150px, maximum of 250px.
			    	  		</div>
					  		<div class="columns adaptive-150-250">
						  		<div class="container" style=" ">
							  		<div class="column"><div class="container" style="">Column #1</div></div>
						  			<div class="column"><div class="container" style="">Column #2</div></div>
						  			<div class="column"><div class="container" style="">Column #3</div></div>
						  			<div class="column"><div class="container" style="">Column #4</div></div>
						  			<div class="column"><div class="container" style="">Column #5</div></div>
						  			<div class="column"><div class="container" style="">Column #6</div></div>
						  			<div class="column"><div class="container" style="">Column #7</div></div>
						  			<div class="column"><div class="container" style="">Column #8</div></div>
						  			<div class="column"><div class="container" style="">Column #9</div></div>
						  		</div>
						  	</div>
				  		</div>
					</div>
				</div>
				<div class="info">
					Adaptive Columns. Min: 250px, Max: 390px. Using the final helper to make it the final element of the row.
				</div>				
		  		<div class="columns adaptive-250-390">
			  		<div class="container" style=" ">
				  		<div class="column"><div class="container" style="">Column #1</div></div>
			  			<div class="column"><div class="container" style="">Column #2</div></div>
			  			<div class="column"><div class="container" style="">Column #3</div></div>
			  			<div class="column"><div class="container" style="">Column #4</div></div>
			  			<div class="column"><div class="container" style="">Column #5</div></div>
			  			<div class="column"><div class="container" style="">Column #6</div></div>
			  			<div class="column final"><div class="container" style="">Column #7 - with final helper</div></div>
			  			<div class="column"><div class="container" style="">Column #8</div></div>
			  			<div class="column"><div class="container" style="">Column #9</div></div>
			  			<div class="column"><div class="container" style="">Column #10</div></div>
			  			<div class="column"><div class="container" style="">Column #11</div></div>
			  			<div class="column"><div class="container" style="">Column #12</div></div>
			  			<div class="column"><div class="container" style="">Column #13</div></div>
			  			<div class="column"><div class="container" style="">Column #14</div></div>
			  			<div class="column final"><div class="container" style="">Column #15 - with final helper</div></div>
			  			<div class="column"><div class="container" style="">Column #16</div></div>
			  			<div class="column final"><div class="container" style="">Column #17</div></div>
			  			<div class="column"><div class="container" style="">Column #18</div></div>
			  			<div class="column"><div class="container" style="">Column #19</div></div>
			  		</div>
			  	</div>
				<div class="info">
					Adaptive Columns with "Lorem Ipsum" text. Minimum width 250px, maximum width 400px
				</div>
		  		<div class="columns adaptive-250-400">
			  		<div class="container same-height" style=" ">
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 1</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 2</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 3</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 4</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 5</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 6</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 7</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 8</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
				  		<div class="column">
				  			<div class="container full-height" style="">
				  				<p><strong>Lorem Header 9</strong></p>
				  				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				  			</div>
				  		</div>
			  		</div>
			  	</div>
			</div>
		</div>
	</body>
</html>
